<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .weak {
            color: red
        }

        .normal {
            color: yellow
        }

        .strong {
            color: green
        }

        #spStrength {
            /* display: none; */
        }
    </style>
</head>

<body>
    <input type="text" id="ip"><span id="spStrength"></span><br>
    <button id="btn">点点我试试</button>
    <script>
        /* 
        @写一个验证 0 ～ 666 数字的正则【√】
        */
        function fn1() {
            var reg = /^((\d)|([1-9]\d)|([1-5]\d{2})|(6[0-5]\d)|(66[0-6]))$/
            btn.onclick = function () {
                if (reg.test(ip.value)) {
                    alert("输入合法")
                } else {
                    alert("invalid input")
                }
            }
        }

        /* 
        @实现密码强度验证【√】
        - 弱：只有数字\字母\特殊符号中的一种
        - 中：任意两种的组合
        - 强：数字+字母+特殊符号[_!@#$%^&*]        
        */
        function fn21() {
            // 判断有无数字
            var regDigit = /\d/
            // 判断有无字母
            var regLetter = /[a-z]/i
            // 判断有无特殊符号
            var regSymbol = /[_!@#\$%\^&\*]/

            btn.onclick = function () {
                var value = ip.value

                // 判断有无数字
                var hasDigit = regDigit.test(value)
                // 判断有无字母
                var hasLetter = regLetter.test(value)
                // 判断有无特殊符号
                var hasSymbol = regSymbol.test(value)

                /* 将3个布尔值全部丢入数组 */
                var arr = [hasDigit, hasLetter, hasSymbol]
                /* 从数组中过滤出值为true的item */
                var trues = arr.filter(
                    function (item) {
                        // return item === true
                        return item
                    }
                )

                var strength = "unknown"

                /* 根据item的长度判定密码强度 */
                switch (trues.length) {
                    case 1:
                        strength = "弱鸡密码"
                        spStrength.className = "weak"
                        break;
                    case 2:
                        strength = "平庸密码"
                        spStrength.className = "normal"
                        break;
                    case 3:
                        strength = "高级密码"
                        spStrength.className = "strong"
                        break;

                    default:
                        alert("非法密码，请重新输入")
                        break;
                }
                console.log(strength);

                /* 显示密码强度 */
                spStrength.innerText = strength
            }
        }

        /* 边输入变检测强弱 */
        function fn22() {
            ip.addEventListener(
                "input",
                function (e) {
                    var retArr = checkPwdStrength(ip.value)
                    spStrength.innerText = retArr[0]
                    spStrength.className = retArr[1]
                }
            )            
        }


        // 判断有无数字
        var regDigit = /\d/
        // 判断有无字母
        var regLetter = /[a-z]/i
        // 判断有无特殊符号
        var regSymbol = /[_!@#\$%\^&\*]/
        function checkPwdStrength(pwd) {
            var value = pwd

            // 判断有无数字
            var hasDigit = regDigit.test(value)
            // 判断有无字母
            var hasLetter = regLetter.test(value)
            // 判断有无特殊符号
            var hasSymbol = regSymbol.test(value)

            /* 将3个布尔值全部丢入数组 */
            var arr = [hasDigit, hasLetter, hasSymbol]
            /* 从数组中过滤出值为true的item */
            var trues = arr.filter(
                function (item) {
                    // return item === true
                    return item
                }
            )

            /* 
            根据item的长度判定密码强度 
            输出结果同时包含[文本,显示样式]
            */
            switch (trues.length) {
                case 1:
                    return ["弱鸡密码", "weak"]
                case 2:
                    return ["平庸密码", "normal"]
                case 3:
                    return ["高级密码", "strong"]
                    break;

                default:
                    return ["非法密码", "weak"]
                    break;
            }
        }

        function main() {
            // fn1()
            fn22()
        }
        main()
    </script>
</body>

</html>